<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>市场商机2</title>
	<link rel="stylesheet" href="../css/market.css">
</head>
<body>
	<div class="select-list" id="selectList">
		<div class="select-item active" data-value="sale">销量</div><div class="select-item" data-value="sales">销额</div>
    	<input type="hidden" value="sale" id="saleName">
	</div>
	<div style="margin-bottom: 20px;">
		<div class="slide-container param-box">
			<div class="slide-content" id="slideContent"></div>
			<a href="javascript:void(0);" class="slide-btn slide-prev-btn"></a>
			<a href="javascript:void(0);" class="slide-btn slide-next-btn"></a>
			<input type="hidden" id="paramName">
			<ul class="slide-box">
				<li class="slide-row">
					<div class="slide-label">优势点：</div>
					<ul class="slide-option-list" id="advantageList"></ul>
				</li>
				<li class="slide-row">
					<div class="slide-label">改善点：</div>
					<ul class="slide-option-list" id="improveList"></ul>
				</li>
				<li class="slide-row">
					<div class="slide-label">机会点：</div>
					<ul class="slide-option-list" id="chanceList"></ul>
				</li>
			</ul>
		</div>
	</div>
	<div style="margin-bottom: 20px;">
		<h3>市场份额</h3>
		<div class="radio-row">
            <label for="shareTypeQoq"><input type="radio" id="shareTypeQoq" name="shareType" value="qoq" checked>环比</label>
            <label for="shareTypeYoy"><input type="radio" id="shareTypeYoy" name="shareType" value="yoy">同比</label>
        </div>
		<table class="market-table" id="shareTable">
			<thead></thead>
			<tbody></tbody>
		</table>
	</div>
	<div style="margin-bottom: 20px;">
		<h3>市场结构比例</h3>
		<div class="radio-row">
            <label for="structureTypeQoq"><input type="radio" id="structureTypeQoq" name="structureType" value="qoq" checked>环比</label>
            <label for="structureTypeYoy"><input type="radio" id="structureTypeYoy" name="structureType" value="yoy">同比</label>
        </div>
		<table class="market-table" id="structureTable">
			<thead></thead>
			<tbody></tbody>
		</table>
	</div>
	<div style="width: 100%; overflow: hidden;">
		<div style="width: 48%; float: left;">
			<table class="market-table table-bg" id="topBrandTable">
				<thead>
					<th width="20%">排名</th>
					<th width="20%">品牌</th>
					<th width="60%">市场份额</th>
				</thead>
				<tbody></tbody>
			</table>
		</div>
		<div style="width: 48%; float: left;">
			
		</div>
	</div>
</body>
<script type="text/javascript" src="../lib/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="../lib/table2excel/dist/table2excel.js"></script>
<script type="text/javascript" src="../script/market.data.js"></script>
<script type="text/javascript" src="../script/market2.js"></script>
<script type="text/javascript">
	var slideSwipe = null;
	var $saleName = $('#saleName');
	var $paramName = $('#paramName');
	var shareTypeName = 'shareType';
	var structureTypeName = 'structureType';

	$(function () {
		// 顶部选项
		var $select = $('#selectList');
   		$select.find('.select-item').on('click', function (el) {
	        var target = $(this);
	        $select.find('.select-item').removeClass('active');
	        target.addClass('active');
	        var value = target.data('value');
	        $select.find('input').val(value);
	        try {
	        	renderParam();
	        } catch (e) {
	        	console.log(e)
	        }
	    });

	    // 市场份额
	    $('input[name="'+ shareTypeName +'"]').change(function () {
	    	renderShareTable();
	    });
	    // 市场结构比例
	    $('input[name="'+ structureTypeName +'"]').change(function () {
	    	renderStructureTable();
	    });

	    // 

   		renderParam();
   	});

   	function init () {
	   	// 1.渲染参数类型
	   	renderParam();
   	}
   	function renderParam () {
		var paramBox = [
			{ name: '匹数', value: '匹数' },
			{ name: '冷媒', value: '冷媒' },
			{ name: '使用面积', value: '使用面积' },
			{ name: '颜色', value: '颜色' },
			{ name: '定频/变频', value: '定频/变频' },
			{ name: '能效等级', value: '能效等级' },
			{ name: '制热效率', value: '制热效率' },
			{ name: '制冷效率', value: '制冷效率' },
			{ name: '内机净重', value: '内机净重' },
			{ name: '内机噪音', value: '内机噪音' },
			{ name: '外机净重', value: '外机净重' },
		];

		slideSwipe = new SlideSwipe('.param-box', {
			data: paramBox
		});
	}

	function renderShareTable () {
		var paramName = $paramName.val();
		var valueName = '份额';
		var shareType = $('input[name="'+ shareTypeName +'"]:checked').val();
		var $table = $('#shareTable');
    	var $thead = $table.find('thead');
    	var $tbody = $table.find('tbody');
    	$thead.empty();
    	$tbody.empty();
    	return new Promise(function (resolve, reject) {
    		var data = [
				{ seg: '<2000', type: '小1匹', value: 0.3, qoqValue: 0.1, yoyValue: 3.1 },
	    		{ seg: '<2000', type: '1匹', value: 0.2, qoqValue: 0.15, yoyValue: 0.1 },
	    		{ seg: '<2000', type: '大1匹', value: 0.0, qoqValue: -0.1, yoyValue: -3.1 },
	    		{ seg: '<2000', type: '小1.5匹', value: 1.3, qoqValue: 0.1, yoyValue: 2.2 },
	    		{ seg: '<2000', type: '1.5匹', value: 2.3, qoqValue: -0.1, yoyValue: -0.1 },
	    		// { seg: '<2000', type: '大1.5匹', value: 1.34, qoqValue: 0.1 },
	    		{ seg: '2000~2500', type: '小1匹', value: 2.0, qoqValue: 2.1, yoyValue: 0 },
	    		{ seg: '2000~2500', type: '1匹', value: 1.1, qoqValue: -0.15, yoyValue: 0 },
	    		{ seg: '2000~2500', type: '大1匹', value: 5, qoqValue: 2.5, yoyValue: 1.5 },
	    		{ seg: '2000~2500', type: '小1.5匹', value: -5.2, qoqValue: 6.1, yoyValue: -1.1 },
	    		{ seg: '2000~2500', type: '1.5匹', value: 14, qoqValue: -0.1, yoyValue: -3.1 },
	    		{ seg: '2000~2500', type: '大1.5匹', value: 1.34, qoqValue: 0.1, yoyValue: 4 },
	    		{ seg: '2500~3000', type: '大1匹', value: 5, qoqValue: 0, yoyValue: 5.2 },
	    		{ seg: '2500~3000', type: '小1.5匹', value: -5.2, qoqValue: 3.2, yoyValue: 12 },
	    		{ seg: '2500~3000', type: '1.5匹', value: 5, qoqValue: -5.1, yoyValue: 4.3 },
	    		{ seg: '2500~3000', type: '大1.5匹', value: 34, qoqValue: 0.0, yoyValue: -3.1 },
			]
			var segArr = [];
			var typeArr = [];
			var theadStr = '';
			var tbodyStr = '';
			var colArr = [valueName];
			var rateName = shareType === 'qoq' ? '环比' : '同比'
			var rateValue = shareType === 'qoq' ? 'qoqValue' : 'yoyValue'
			colArr.push(rateName);		
			data.forEach(function (item) {
	    		segArr.indexOf(item.seg) < 0 && segArr.push(item.seg);
	    		typeArr.indexOf(item.type) < 0 && typeArr.push(item.type);
	    	});
	    	theadStr = '<tr><th rowspan="2">价格段</th>';
	    	// 第一行
	    	typeArr.forEach(function (item) {
	    		theadStr += '<th colspan="2">'+ item +'</th>';
	    	});
	    	theadStr += '</tr></tr>';
	    	// 第二行
	    	typeArr.forEach(function (item) {
	    		colArr.forEach(function (col) {
	    			theadStr += '<th data-type="'+ item + '&' + col +'">'+ col +'</th>';
	    		});
	    	});
	    	theadStr += '</tr>';
	    	$thead.append(theadStr);

	    	var list = [];
	    	var row = { seg: '' };
	    	typeArr.forEach(function(item) {
	    		colArr.forEach(function (col) {
	    			row['' + item + '&' + col] = '0.00'
	    		});
	    	});
	    	segArr.forEach(function(seg) {
	    		var item = $.extend(true, {}, row, { seg: seg });
	    		list.push(item);
	    	});
	    	list.forEach(function(item) {
	    		data.forEach(function(jItem) {
	    			if (item.seg === jItem.seg) {
	    				item[jItem.type + '&' + valueName] = jItem.value;
	    				item[jItem.type + '&' + rateName] = jItem[rateValue];
	    			}
	    		});
	    	});

	    	// tbody
	    	list.forEach(function (item) {
	    		tbodyStr += '<tr>';
	    		tbodyStr += '<td>'+ item.seg +'</td>';
	    		typeArr.forEach(function (jItem) {
	    			var color = ''
	    			var value = parseFloat(item[jItem + '&' + rateName]);
	    			color = value > 0 ? 'red' : value < 0 ? 'green' : '';
	    			colArr.forEach(function (col) {
	    				tbodyStr += '<td data-seg="'+ item.seg +'" data-type="'+ jItem + '" data-col="'+ col +'"><span class="'+ color +'">' + item[jItem + '&' + col] + '%' + '</span></td>';
	    			});
	    		});
	    		tbodyStr += '</tr>';
	    	});
	    	var countObj = {
	    		seg: '合计'
	    	};
	    	typeArr.forEach(function (item) {
	    		colArr.forEach(function (col) {
	    			countObj[item + '&' + col] = 0;
	    		});
	    	});
	    	list.forEach(function(item) {
	    		for (i in countObj) {
	    			countObj[i] += parseFloat(item[i]);
	    		}
	    	});
	    	tbodyStr += '<tr class="count-tr">';
	    	tbodyStr += '<td>合计</td>';
	    	typeArr.forEach(function (item) {
	    		colArr.forEach(function (col) {
	    			tbodyStr += '<td>' + parseFloat(countObj[item + '&' + col]).toFixed(2) + '%</td>';
	    		});
	    	});
	    	tbodyStr += '</tr>';
	   		$tbody.append(tbodyStr);
	   		resolve();
    	});
	}

	function renderStructureTable () {
		var paramName = $paramName.val();
		var valueName = '占比';
		var shareType = $('input[name="'+ structureTypeName +'"]:checked').val();
		var $table = $('#structureTable');
    	var $thead = $table.find('thead');
    	var $tbody = $table.find('tbody');
    	$thead.empty();
    	$tbody.empty();
    	return new Promise(function (resolve, reject) {
    		var data = [
				{ seg: '<2000', type: '小1匹', value: 0.3, qoqValue: 0.1, yoyValue: 3.1 },
	    		{ seg: '<2000', type: '1匹', value: 0.2, qoqValue: 0.15, yoyValue: 0.1 },
	    		{ seg: '<2000', type: '大1匹', value: 0.0, qoqValue: -0.1, yoyValue: -3.1 },
	    		{ seg: '<2000', type: '小1.5匹', value: 1.3, qoqValue: 0.1, yoyValue: 2.2 },
	    		{ seg: '<2000', type: '1.5匹', value: 2.3, qoqValue: -0.1, yoyValue: -0.1 },
	    		// { seg: '<2000', type: '大1.5匹', value: 1.34, qoqValue: 0.1 },
	    		{ seg: '2000~2500', type: '小1匹', value: 2.0, qoqValue: 2.1, yoyValue: 0 },
	    		{ seg: '2000~2500', type: '1匹', value: 1.1, qoqValue: -0.15, yoyValue: 0 },
	    		{ seg: '2000~2500', type: '大1匹', value: 5, qoqValue: 2.5, yoyValue: 1.5 },
	    		{ seg: '2000~2500', type: '小1.5匹', value: -5.2, qoqValue: 6.1, yoyValue: -1.1 },
	    		{ seg: '2000~2500', type: '1.5匹', value: 14, qoqValue: -0.1, yoyValue: -3.1 },
	    		{ seg: '2000~2500', type: '大1.5匹', value: 1.34, qoqValue: 0.1, yoyValue: 4 },
	    		{ seg: '2500~3000', type: '大1匹', value: 5, qoqValue: 0, yoyValue: 5.2 },
	    		{ seg: '2500~3000', type: '小1.5匹', value: -5.2, qoqValue: 3.2, yoyValue: 12 },
	    		{ seg: '2500~3000', type: '1.5匹', value: 5, qoqValue: -5.1, yoyValue: 4.3 },
	    		{ seg: '2500~3000', type: '大1.5匹', value: 34, qoqValue: 0.0, yoyValue: -3.1 },
			]
			var segArr = [];
			var typeArr = [];
			var theadStr = '';
			var tbodyStr = '';
			var colArr = [valueName];
			var rateName = shareType === 'qoq' ? '环比' : '同比'
			var rateValue = shareType === 'qoq' ? 'qoqValue' : 'yoyValue'
			colArr.push(rateName);		
			data.forEach(function (item) {
	    		segArr.indexOf(item.seg) < 0 && segArr.push(item.seg);
	    		typeArr.indexOf(item.type) < 0 && typeArr.push(item.type);
	    	});
	    	theadStr = '<tr><th rowspan="2">价格段</th>';
	    	// 第一行
	    	typeArr.forEach(function (item) {
	    		theadStr += '<th colspan="2">'+ item +'</th>';
	    	});
	    	theadStr += '</tr></tr>';
	    	// 第二行
	    	typeArr.forEach(function (item) {
	    		colArr.forEach(function (col) {
	    			theadStr += '<th data-type="'+ item + '&' + col +'">'+ col +'</th>';
	    		});
	    	});
	    	theadStr += '</tr>';
	    	$thead.append(theadStr);

	    	var list = [];
	    	var row = { seg: '' };
	    	typeArr.forEach(function(item) {
	    		colArr.forEach(function (col) {
	    			row['' + item + '&' + col] = '0.00'
	    		});
	    	});
	    	segArr.forEach(function(seg) {
	    		var item = $.extend(true, {}, row, { seg: seg });
	    		list.push(item);
	    	});
	    	list.forEach(function(item) {
	    		data.forEach(function(jItem) {
	    			if (item.seg === jItem.seg) {
	    				item[jItem.type + '&' + valueName] = jItem.value;
	    				item[jItem.type + '&' + rateName] = jItem[rateValue];
	    			}
	    		});
	    	});

	    	// tbody
	    	list.forEach(function (item) {
	    		tbodyStr += '<tr>';
	    		tbodyStr += '<td>'+ item.seg +'</td>';
	    		typeArr.forEach(function (jItem) {
	    			var color = ''
	    			var value = parseFloat(item[jItem + '&' + rateName]);
	    			color = value > 0 ? 'red' : value < 0 ? 'green' : '';
	    			colArr.forEach(function (col) {
	    				tbodyStr += '<td data-seg="'+ item.seg +'" data-type="'+ jItem + '" data-col="'+ col +'"><span class="'+ color +'">' + item[jItem + '&' + col] + '%' + '</span></td>';
	    			});
	    		});
	    		tbodyStr += '</tr>';
	    	});
	   		$tbody.append(tbodyStr);
	   		resolve();
    	});
	}

	// 市场结构点击
	function structureClickEvent () {
		
	}

	/**
	 * 参数渲染
	 * @param {[type]} el      [description]
	 * @param {[type]} options [description]
	 */
	function SlideSwipe (el, options) {
		this.el = $(el)
		this.elName = el
		this.index = 1
		this.length = 0
		this.size = 8
		this.itemWidth = 120
		options.data = options.data || []
		this.init(options);
	}

	/**
	 * SlideSwiper 初始化 
	 * @param  {[type]} options { data: [] }
	 * @return {[type]}         [description]
	 */
	SlideSwipe.prototype.init = function (options) {
		this.renderList(options.data);
	}

	SlideSwipe.prototype.renderList = function (data) {
		this.index = 1
		this.length = data.length || 0
		var $content = this.el.find('.slide-content');
		$content.empty();
		var str = '<div class="slide-scroll" style="width:'+ this.itemWidth * this.length +'px">';
		data.forEach(function (item) {
			str += '<div class="slide-item" data-value="'+ item.value +'" style="width: '+ this.itemWidth +'px;">'+ item.name +'</div>';
		}.bind(this));
		str += '</div>';
		$content.append(str);
		this.events();
		this.el.find('.slide-item').eq(0).click();
	}

	SlideSwipe.prototype.events = function () {
		// 上一页
		$(document).off('click', this.elName + ' .slide-prev-btn', move);
		$(document).on('click', this.elName + ' .slide-prev-btn', move.bind(this, 'prev'));
		// 下一页
		$(document).off('click', this.elName + ' .slide-next-btn', move);
		$(document).on('click', this.elName + ' .slide-next-btn', move.bind(this, 'next'));
		function move (type) {
			var scroll = this.el.find('.slide-scroll');
			var totalPage = Math.ceil(this.length / this.size);
			var array = scroll.css('transform').substring(7).trim().split(',')
			var current = array.length > 2 ? parseFloat(array[4]) : 0
			if (this.length > 0) {
				var distance = this.size * this.itemWidth;
				if (type === 'prev') {
					if (this.index < totalPage) {
						scroll.css({ transform: 'translateX('+ (current - distance) +'px)' });
						this.index++;
					} else if (this.index === totalPage) {
						scroll.css({ transform: 'translateX('+ 0 +'px)' });
						this.index = 1;
					}
				} else if (type === 'next') {
					if (this.index > 1) {
						scroll.css({ transform: 'translateX('+ (current + distance) +'px)' });
						this.index--;
					} else if (this.index === 1) {
						scroll.css({ transform: 'translateX('+ (totalPage - 1) * -distance +'px)' })
						this.index = totalPage;
					}
				}
			}
		}

		// 导航点击
		$(document).off('click', this.elName + ' .slide-item', navClick);
		$(document).on('click', this.elName + ' .slide-item', navClick.bind(this));
		function navClick (event) {
			var target = event.target;
			var paramName = $(target).data('value');
			this.el.find('.slide-item').removeClass('active');
			$(target).addClass('active');
			$paramName.val(paramName);
			renderShareTable().then(function () {
				renderStructureTable().then(function () {
					$('#structureTable').find('td').eq(1).click();
				});
			});
			// this.renderOptionList();
		}

		// 选项点击
		$(document).off('click', this.elName + ' .slide-option', optionClick);
		$(document).on('click', this.elName + ' .slide-option', optionClick.bind(this));

		function optionClick (event) {
			var target = event.target;
			var seg = $(target).data('seg');
			var type = $(target).data('type');
			var bg = $(target).data('bg');
			this.el.find('.slide-option').removeClass('active');
			$(target).addClass('active');
			$('#shareTable td').attr('class', '');
			// $('#shareTable td').removeClass('bg-red').removeClass('bg-blue').removeClass('bg-green')
			$('#shareTable td').each(function (index, item) {
				var itemSeg = $(item).data('seg');
				var itemType = $(item).data('type');
				if (seg === itemSeg && type === itemType) {
					$(item).addClass(bg)
					console.log(item)
				}
			})
		}
	}
</script>
<script type="text/javascript">
	$(function () {
		function renderChart() {
			// var saleName = $($saleName).val();
			var saleName = 'sale';
			var result = chartData;
			console.log(result);
			var $table = $('#topBrandTable');
    		var $tbody = $table.find('tbody');
    		var tbodyStr = '';
    		var list = [];
    		var maxPct = 0;
    		$tbody.empty();
    		result.forEach(function (item) {
    			if (saleName === 'sale') {
    				list.push({
    					value: item.sales,
    					pct: item.salesPct,
    					brand: item.brand,
    					brandOrd: item.brandOrd
    				});
    			} else {
    				list.push({
    					value: item.salesAmount,
    					pct: item.salesAmountPct,
    					brand: item.brand,
    					brandOrd: item.brandOrd
    				});
    			}
    		});
    		list.forEach(function (item) {
    			if (maxPct <= item.pct) {
    				maxPct = item.pct
    			}
    		});
    		list.forEach(function (item) {
    			var pct = item.pct ? (item.pct * 100).toFixed(2) : 0.00;
    			var width = maxPct ? (item.pct / maxPct) * 100 : 0
    			tbodyStr += '<tr>';
    			tbodyStr += '<td>'+ item.brandOrd +'</td>';
    			tbodyStr += '<td>'+ item.brand +'</td>';
    			tbodyStr += '<td>';
    			tbodyStr += '<div class="bar-td">'
    			tbodyStr += '<div class="bar-bg">';
    			tbodyStr += '<div class="bar" style="width: '+ width +'%"></div>';
    			tbodyStr += '</div>';
    			tbodyStr += '<div class="bar-value">'+ pct + '%' +'</div>';
    			tbodyStr += '</div>';
    			tbodyStr += '</td>';
    			tbodyStr += '</tr>';
    		});
    		$tbody.append(tbodyStr);
		}
		renderChart();

		$(document).on('click', '#structureTable td', function () {
			console.log(this)
			var type = $(this).data('type');
			var seg = $(this).data('seg');
			
			var $tds = $('#structureTable td');
			$tds.removeClass('border');
			$tds.each(function(index, item) {
				var itemType = $(item).data('type');
				var itemSeg = $(item).data('seg');
				if (itemType === type && itemSeg === seg) {
					$(item).addClass('border');
				}
			});
		})
	});
</script>
</html>